<!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Flask_Chat_App</title>
  </head>
  <body>

    <h3 style='color: #ccc;font-size: 30px;'>No message yet..</h3>
    <div class="message_holder"></div>

    <form action="" method="POST">
      <!--
      <input type="text" class="username" placeholder="User Name"/>
-->
      <input type="text" class="message" placeholder="Messages"/>
      <input type="submit"/>
    </form>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery.min.js"></script>
    <script src="socket.io.min.js"></script>
    <script type="text/javascript">

      function fetch_log(){
	  $.ajax({url:"/log",success:function(json){
	      $( 'div.message_holder' ).html('')
	      for(var i=json.length-1; i> -1; i--){
		$( 'div.message_holder' ).append( '<div><b style="color: #000">'+json[i][1]+'</b> '+json[i][2]+'</div>' )
	      }
	  }});
      }
      setTimeout(fetch_log)

      var msg_channel = 'msg_channel'
      var socket = io.connect('http://' + document.domain + ':' + location.port);

      socket.on( 'connect', function() {
	  socket.emit( msg_channel, {
	      data: 'User Connected'
	  } )
	  var form = $( 'form' ).on( 'submit', function( e ) {
	      e.preventDefault()
	      //let user_name = $( 'input.username' ).val()
	      let user_input = $( 'input.message' ).val()
	      socket.emit( msg_channel, {
		  //user_name : user_name,
		  msg: user_input
	      } )
	      $( 'input.message' ).val( '' ).focus()
	  } )
      } )
      socket.on( msg_channel, function( json ) {
	  if( typeof json.ip !== 'undefined' && typeof json.msg !== 'undefined') {
	      $( 'h3' ).remove()
	      //$( 'div.message_holder' ).append( '<div><b style="color: #000">'+json.ip+'</b> '+json.msg+'</div>' )
	      fetch_log()
	  }
      })
      </script>

  </body>
  </html>
